<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3716977" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe799;</span>
                <div class="name">mobile-check</div>
                <div class="code-name">&amp;#xe799;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79a;</span>
                <div class="name">mobile-alt</div>
                <div class="code-name">&amp;#xe79a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79d;</span>
                <div class="name">aliwangwang</div>
                <div class="code-name">&amp;#xe79d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79e;</span>
                <div class="name">nail</div>
                <div class="code-name">&amp;#xe79e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe79f;</span>
                <div class="name">nail-fixed</div>
                <div class="code-name">&amp;#xe79f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a0;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe7a0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a1;</span>
                <div class="name">dollar</div>
                <div class="code-name">&amp;#xe7a1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a2;</span>
                <div class="name">transanction</div>
                <div class="code-name">&amp;#xe7a2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a3;</span>
                <div class="name">filter-fill</div>
                <div class="code-name">&amp;#xe7a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a4;</span>
                <div class="name">all-fill</div>
                <div class="code-name">&amp;#xe7a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a5;</span>
                <div class="name">database plus-fill</div>
                <div class="code-name">&amp;#xe7a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a6;</span>
                <div class="name">database-fill</div>
                <div class="code-name">&amp;#xe7a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a7;</span>
                <div class="name">comment lines-fill</div>
                <div class="code-name">&amp;#xe7a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a8;</span>
                <div class="name">comment dots-fill</div>
                <div class="code-name">&amp;#xe7a8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a9;</span>
                <div class="name">paper plane-fill</div>
                <div class="code-name">&amp;#xe7a9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7aa;</span>
                <div class="name">eye slash-fill</div>
                <div class="code-name">&amp;#xe7aa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ab;</span>
                <div class="name">eye-fill</div>
                <div class="code-name">&amp;#xe7ab;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ac;</span>
                <div class="name">lightbulb-fill</div>
                <div class="code-name">&amp;#xe7ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ad;</span>
                <div class="name">flag-fill</div>
                <div class="code-name">&amp;#xe7ad;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ae;</span>
                <div class="name">tag-fill</div>
                <div class="code-name">&amp;#xe7ae;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7af;</span>
                <div class="name">position-fill</div>
                <div class="code-name">&amp;#xe7af;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b0;</span>
                <div class="name">location-fill</div>
                <div class="code-name">&amp;#xe7b0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b1;</span>
                <div class="name">map-fill</div>
                <div class="code-name">&amp;#xe7b1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b2;</span>
                <div class="name">inbox in-fill</div>
                <div class="code-name">&amp;#xe7b2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b3;</span>
                <div class="name">box-fill</div>
                <div class="code-name">&amp;#xe7b3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b4;</span>
                <div class="name">database set-fill</div>
                <div class="code-name">&amp;#xe7b4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b5;</span>
                <div class="name">layer group-fill</div>
                <div class="code-name">&amp;#xe7b5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b6;</span>
                <div class="name">cry-fill</div>
                <div class="code-name">&amp;#xe7b6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b7;</span>
                <div class="name">smile-fill</div>
                <div class="code-name">&amp;#xe7b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b8;</span>
                <div class="name">unlock-fill</div>
                <div class="code-name">&amp;#xe7b8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7b9;</span>
                <div class="name">lock-fill</div>
                <div class="code-name">&amp;#xe7b9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ba;</span>
                <div class="name">align right-fill</div>
                <div class="code-name">&amp;#xe7ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bb;</span>
                <div class="name">align left-fill</div>
                <div class="code-name">&amp;#xe7bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bc;</span>
                <div class="name">border bottom-fill</div>
                <div class="code-name">&amp;#xe7bc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bd;</span>
                <div class="name">border top-fill</div>
                <div class="code-name">&amp;#xe7bd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7be;</span>
                <div class="name">align center-fill</div>
                <div class="code-name">&amp;#xe7be;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7bf;</span>
                <div class="name">border verticle-fill</div>
                <div class="code-name">&amp;#xe7bf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c0;</span>
                <div class="name">pic center-fill</div>
                <div class="code-name">&amp;#xe7c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c1;</span>
                <div class="name">pic side-fill</div>
                <div class="code-name">&amp;#xe7c1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c2;</span>
                <div class="name">folder open-fill</div>
                <div class="code-name">&amp;#xe7c2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c3;</span>
                <div class="name">folder plus-fill</div>
                <div class="code-name">&amp;#xe7c3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c4;</span>
                <div class="name">folder-fill</div>
                <div class="code-name">&amp;#xe7c4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c5;</span>
                <div class="name">file-SQL</div>
                <div class="code-name">&amp;#xe7c5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c6;</span>
                <div class="name">file plus-fill</div>
                <div class="code-name">&amp;#xe7c6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c7;</span>
                <div class="name">file-fill</div>
                <div class="code-name">&amp;#xe7c7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c8;</span>
                <div class="name">copy-fill</div>
                <div class="code-name">&amp;#xe7c8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7c9;</span>
                <div class="name">headset-fill</div>
                <div class="code-name">&amp;#xe7c9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ca;</span>
                <div class="name">phone-fill</div>
                <div class="code-name">&amp;#xe7ca;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cb;</span>
                <div class="name">pause circle-fill</div>
                <div class="code-name">&amp;#xe7cb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cc;</span>
                <div class="name">stop circle-fill</div>
                <div class="code-name">&amp;#xe7cc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cd;</span>
                <div class="name">play circle-fill</div>
                <div class="code-name">&amp;#xe7cd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ce;</span>
                <div class="name">delete-fill</div>
                <div class="code-name">&amp;#xe7ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7cf;</span>
                <div class="name">picture-fill</div>
                <div class="code-name">&amp;#xe7cf;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d0;</span>
                <div class="name">mail-fill</div>
                <div class="code-name">&amp;#xe7d0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d1;</span>
                <div class="name">heart-fill</div>
                <div class="code-name">&amp;#xe7d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d2;</span>
                <div class="name">collection-fill</div>
                <div class="code-name">&amp;#xe7d2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d3;</span>
                <div class="name">user-group-fill</div>
                <div class="code-name">&amp;#xe7d3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d4;</span>
                <div class="name">user plus-fill</div>
                <div class="code-name">&amp;#xe7d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d5;</span>
                <div class="name">user-fill</div>
                <div class="code-name">&amp;#xe7d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d6;</span>
                <div class="name">cog-fill</div>
                <div class="code-name">&amp;#xe7d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d7;</span>
                <div class="name">clock-fill</div>
                <div class="code-name">&amp;#xe7d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d8;</span>
                <div class="name">calendar alt-fill</div>
                <div class="code-name">&amp;#xe7d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7d9;</span>
                <div class="name">cloud download-fill</div>
                <div class="code-name">&amp;#xe7d9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7da;</span>
                <div class="name">cloud upload-fill</div>
                <div class="code-name">&amp;#xe7da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7db;</span>
                <div class="name">exchange-fill</div>
                <div class="code-name">&amp;#xe7db;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7dc;</span>
                <div class="name">info-circle-fill</div>
                <div class="code-name">&amp;#xe7dc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7dd;</span>
                <div class="name">question-circle-fill</div>
                <div class="code-name">&amp;#xe7dd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7de;</span>
                <div class="name">exclamation circle-f</div>
                <div class="code-name">&amp;#xe7de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7df;</span>
                <div class="name">minus-circle-fill</div>
                <div class="code-name">&amp;#xe7df;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e0;</span>
                <div class="name">plus-circle-fill</div>
                <div class="code-name">&amp;#xe7e0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e1;</span>
                <div class="name">times-circle-fill</div>
                <div class="code-name">&amp;#xe7e1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e2;</span>
                <div class="name">check-circle-fill</div>
                <div class="code-name">&amp;#xe7e2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e3;</span>
                <div class="name">compress alt-fill</div>
                <div class="code-name">&amp;#xe7e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e4;</span>
                <div class="name">expand alt-fill</div>
                <div class="code-name">&amp;#xe7e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e5;</span>
                <div class="name">filter</div>
                <div class="code-name">&amp;#xe7e5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e6;</span>
                <div class="name">all</div>
                <div class="code-name">&amp;#xe7e6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e7;</span>
                <div class="name">database-plus</div>
                <div class="code-name">&amp;#xe7e7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e8;</span>
                <div class="name">database</div>
                <div class="code-name">&amp;#xe7e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e9;</span>
                <div class="name">comment-lines</div>
                <div class="code-name">&amp;#xe7e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ea;</span>
                <div class="name">comment-dots</div>
                <div class="code-name">&amp;#xe7ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7eb;</span>
                <div class="name">paper-plane</div>
                <div class="code-name">&amp;#xe7eb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ec;</span>
                <div class="name">eye-slash</div>
                <div class="code-name">&amp;#xe7ec;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ed;</span>
                <div class="name">eye</div>
                <div class="code-name">&amp;#xe7ed;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ee;</span>
                <div class="name">lightbulb</div>
                <div class="code-name">&amp;#xe7ee;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ef;</span>
                <div class="name">flag</div>
                <div class="code-name">&amp;#xe7ef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f0;</span>
                <div class="name">tag</div>
                <div class="code-name">&amp;#xe7f0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f1;</span>
                <div class="name">position</div>
                <div class="code-name">&amp;#xe7f1;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f2;</span>
                <div class="name">location</div>
                <div class="code-name">&amp;#xe7f2;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f3;</span>
                <div class="name">map</div>
                <div class="code-name">&amp;#xe7f3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f4;</span>
                <div class="name">inbox-in</div>
                <div class="code-name">&amp;#xe7f4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f5;</span>
                <div class="name">box</div>
                <div class="code-name">&amp;#xe7f5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f6;</span>
                <div class="name">database-set</div>
                <div class="code-name">&amp;#xe7f6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f7;</span>
                <div class="name">layer-group</div>
                <div class="code-name">&amp;#xe7f7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f8;</span>
                <div class="name">wind-cry</div>
                <div class="code-name">&amp;#xe7f8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7f9;</span>
                <div class="name">wind-smile</div>
                <div class="code-name">&amp;#xe7f9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7fa;</span>
                <div class="name">unlock</div>
                <div class="code-name">&amp;#xe7fa;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7fb;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe7fb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7fc;</span>
                <div class="name">align-right</div>
                <div class="code-name">&amp;#xe7fc;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7fd;</span>
                <div class="name">align-left</div>
                <div class="code-name">&amp;#xe7fd;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7fe;</span>
                <div class="name">border-bottom</div>
                <div class="code-name">&amp;#xe7fe;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ff;</span>
                <div class="name">border-top</div>
                <div class="code-name">&amp;#xe7ff;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe800;</span>
                <div class="name">align-center</div>
                <div class="code-name">&amp;#xe800;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe801;</span>
                <div class="name">border-verticle</div>
                <div class="code-name">&amp;#xe801;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe802;</span>
                <div class="name">pic-center</div>
                <div class="code-name">&amp;#xe802;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe803;</span>
                <div class="name">pic-side</div>
                <div class="code-name">&amp;#xe803;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe804;</span>
                <div class="name">folder-open</div>
                <div class="code-name">&amp;#xe804;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe805;</span>
                <div class="name">folder-plus</div>
                <div class="code-name">&amp;#xe805;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe806;</span>
                <div class="name">folder</div>
                <div class="code-name">&amp;#xe806;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe807;</span>
                <div class="name">file-SQL</div>
                <div class="code-name">&amp;#xe807;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe808;</span>
                <div class="name">file-plus</div>
                <div class="code-name">&amp;#xe808;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe809;</span>
                <div class="name">file</div>
                <div class="code-name">&amp;#xe809;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80a;</span>
                <div class="name">copy</div>
                <div class="code-name">&amp;#xe80a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80b;</span>
                <div class="name">headset</div>
                <div class="code-name">&amp;#xe80b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80c;</span>
                <div class="name">phone</div>
                <div class="code-name">&amp;#xe80c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80d;</span>
                <div class="name">pause circle</div>
                <div class="code-name">&amp;#xe80d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80e;</span>
                <div class="name">stop circle</div>
                <div class="code-name">&amp;#xe80e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80f;</span>
                <div class="name">play circle</div>
                <div class="code-name">&amp;#xe80f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe810;</span>
                <div class="name">delete</div>
                <div class="code-name">&amp;#xe810;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe811;</span>
                <div class="name">picture</div>
                <div class="code-name">&amp;#xe811;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe812;</span>
                <div class="name">mail</div>
                <div class="code-name">&amp;#xe812;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe813;</span>
                <div class="name">like</div>
                <div class="code-name">&amp;#xe813;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe814;</span>
                <div class="name">collection</div>
                <div class="code-name">&amp;#xe814;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe815;</span>
                <div class="name">user-group</div>
                <div class="code-name">&amp;#xe815;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe816;</span>
                <div class="name">account-plus</div>
                <div class="code-name">&amp;#xe816;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe817;</span>
                <div class="name">account</div>
                <div class="code-name">&amp;#xe817;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe818;</span>
                <div class="name">cog</div>
                <div class="code-name">&amp;#xe818;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe819;</span>
                <div class="name">clock</div>
                <div class="code-name">&amp;#xe819;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81a;</span>
                <div class="name">calendar-alt</div>
                <div class="code-name">&amp;#xe81a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81b;</span>
                <div class="name">cloud download</div>
                <div class="code-name">&amp;#xe81b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81c;</span>
                <div class="name">cloud upload</div>
                <div class="code-name">&amp;#xe81c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81d;</span>
                <div class="name">exchange</div>
                <div class="code-name">&amp;#xe81d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81e;</span>
                <div class="name">info-circle</div>
                <div class="code-name">&amp;#xe81e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe81f;</span>
                <div class="name">question-circle</div>
                <div class="code-name">&amp;#xe81f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe820;</span>
                <div class="name">exclamation-circle</div>
                <div class="code-name">&amp;#xe820;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe821;</span>
                <div class="name">minus-circle</div>
                <div class="code-name">&amp;#xe821;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe822;</span>
                <div class="name">plus-circle</div>
                <div class="code-name">&amp;#xe822;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe823;</span>
                <div class="name">times-circle</div>
                <div class="code-name">&amp;#xe823;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe824;</span>
                <div class="name">check-circle</div>
                <div class="code-name">&amp;#xe824;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe825;</span>
                <div class="name">compress-alt</div>
                <div class="code-name">&amp;#xe825;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe826;</span>
                <div class="name">expand-alt</div>
                <div class="code-name">&amp;#xe826;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe827;</span>
                <div class="name">ban</div>
                <div class="code-name">&amp;#xe827;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe828;</span>
                <div class="name">minus</div>
                <div class="code-name">&amp;#xe828;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe829;</span>
                <div class="name">plus</div>
                <div class="code-name">&amp;#xe829;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82a;</span>
                <div class="name">times</div>
                <div class="code-name">&amp;#xe82a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82b;</span>
                <div class="name">check</div>
                <div class="code-name">&amp;#xe82b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82c;</span>
                <div class="name">search-minus</div>
                <div class="code-name">&amp;#xe82c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82d;</span>
                <div class="name">search-plus</div>
                <div class="code-name">&amp;#xe82d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82e;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe82e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe82f;</span>
                <div class="name">reply</div>
                <div class="code-name">&amp;#xe82f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe830;</span>
                <div class="name">undo</div>
                <div class="code-name">&amp;#xe830;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe831;</span>
                <div class="name">redo</div>
                <div class="code-name">&amp;#xe831;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe832;</span>
                <div class="name">external-link</div>
                <div class="code-name">&amp;#xe832;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe833;</span>
                <div class="name">arrows-alt</div>
                <div class="code-name">&amp;#xe833;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe834;</span>
                <div class="name">indent</div>
                <div class="code-name">&amp;#xe834;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe835;</span>
                <div class="name">outdent</div>
                <div class="code-name">&amp;#xe835;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe836;</span>
                <div class="name">sort-line</div>
                <div class="code-name">&amp;#xe836;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe837;</span>
                <div class="name">switch</div>
                <div class="code-name">&amp;#xe837;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe838;</span>
                <div class="name">wind-descending</div>
                <div class="code-name">&amp;#xe838;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe839;</span>
                <div class="name">wind-ascending</div>
                <div class="code-name">&amp;#xe839;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83a;</span>
                <div class="name">download</div>
                <div class="code-name">&amp;#xe83a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83b;</span>
                <div class="name">upload</div>
                <div class="code-name">&amp;#xe83b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83c;</span>
                <div class="name">arrow-to-bottom</div>
                <div class="code-name">&amp;#xe83c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83d;</span>
                <div class="name">arrow-to-top</div>
                <div class="code-name">&amp;#xe83d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83e;</span>
                <div class="name">long-arrow-down</div>
                <div class="code-name">&amp;#xe83e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe83f;</span>
                <div class="name">long-arrow-up</div>
                <div class="code-name">&amp;#xe83f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe840;</span>
                <div class="name">arrow-right</div>
                <div class="code-name">&amp;#xe840;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe841;</span>
                <div class="name">arrow-left</div>
                <div class="code-name">&amp;#xe841;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe842;</span>
                <div class="name">sort</div>
                <div class="code-name">&amp;#xe842;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe843;</span>
                <div class="name">sort-down</div>
                <div class="code-name">&amp;#xe843;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe844;</span>
                <div class="name">sort-up</div>
                <div class="code-name">&amp;#xe844;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe845;</span>
                <div class="name">caret-right</div>
                <div class="code-name">&amp;#xe845;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe846;</span>
                <div class="name">caret-left</div>
                <div class="code-name">&amp;#xe846;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe847;</span>
                <div class="name">arrows-v</div>
                <div class="code-name">&amp;#xe847;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe848;</span>
                <div class="name">angle- double-down</div>
                <div class="code-name">&amp;#xe848;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe849;</span>
                <div class="name">angle-double-up</div>
                <div class="code-name">&amp;#xe849;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84a;</span>
                <div class="name">angle-double-right</div>
                <div class="code-name">&amp;#xe84a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84b;</span>
                <div class="name">angle-double-left</div>
                <div class="code-name">&amp;#xe84b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84c;</span>
                <div class="name">angle-down</div>
                <div class="code-name">&amp;#xe84c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84d;</span>
                <div class="name">angle-up</div>
                <div class="code-name">&amp;#xe84d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84e;</span>
                <div class="name">angle-right</div>
                <div class="code-name">&amp;#xe84e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe84f;</span>
                <div class="name">angle-left</div>
                <div class="code-name">&amp;#xe84f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe850;</span>
                <div class="name">paperclip</div>
                <div class="code-name">&amp;#xe850;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe851;</span>
                <div class="name">connection</div>
                <div class="code-name">&amp;#xe851;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe853;</span>
                <div class="name">training</div>
                <div class="code-name">&amp;#xe853;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe854;</span>
                <div class="name">process</div>
                <div class="code-name">&amp;#xe854;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe855;</span>
                <div class="name">news</div>
                <div class="code-name">&amp;#xe855;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe856;</span>
                <div class="name">save</div>
                <div class="code-name">&amp;#xe856;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe857;</span>
                <div class="name">print</div>
                <div class="code-name">&amp;#xe857;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe858;</span>
                <div class="name">new-releases</div>
                <div class="code-name">&amp;#xe858;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe85a;</span>
                <div class="name">release</div>
                <div class="code-name">&amp;#xe85a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe85b;</span>
                <div class="name">alert</div>
                <div class="code-name">&amp;#xe85b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe85c;</span>
                <div class="name">backspace</div>
                <div class="code-name">&amp;#xe85c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe85d;</span>
                <div class="name">gem</div>
                <div class="code-name">&amp;#xe85d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe85e;</span>
                <div class="name">integral</div>
                <div class="code-name">&amp;#xe85e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe85f;</span>
                <div class="name">star-circle</div>
                <div class="code-name">&amp;#xe85f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe860;</span>
                <div class="name">user-circle</div>
                <div class="code-name">&amp;#xe860;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe861;</span>
                <div class="name">cloud-machine-fill</div>
                <div class="code-name">&amp;#xe861;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe862;</span>
                <div class="name">cloud-machine</div>
                <div class="code-name">&amp;#xe862;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe863;</span>
                <div class="name">terminal-fill</div>
                <div class="code-name">&amp;#xe863;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe864;</span>
                <div class="name">terminal</div>
                <div class="code-name">&amp;#xe864;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe865;</span>
                <div class="name">shopping-cart-fill</div>
                <div class="code-name">&amp;#xe865;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe867;</span>
                <div class="name">resource</div>
                <div class="code-name">&amp;#xe867;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86a;</span>
                <div class="name">rank</div>
                <div class="code-name">&amp;#xe86a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86b;</span>
                <div class="name">sync-alt</div>
                <div class="code-name">&amp;#xe86b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86c;</span>
                <div class="name">compass</div>
                <div class="code-name">&amp;#xe86c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86d;</span>
                <div class="name">arrow-alt- from-top</div>
                <div class="code-name">&amp;#xe86d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86e;</span>
                <div class="name">arrow-alt-from-botto</div>
                <div class="code-name">&amp;#xe86e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe86f;</span>
                <div class="name">menu</div>
                <div class="code-name">&amp;#xe86f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe870;</span>
                <div class="name">icon-drag</div>
                <div class="code-name">&amp;#xe870;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe871;</span>
                <div class="name">early-warning</div>
                <div class="code-name">&amp;#xe871;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe872;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe872;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe873;</span>
                <div class="name">share</div>
                <div class="code-name">&amp;#xe873;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe874;</span>
                <div class="name">management</div>
                <div class="code-name">&amp;#xe874;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe875;</span>
                <div class="name">accesskeys</div>
                <div class="code-name">&amp;#xe875;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe877;</span>
                <div class="name">arrow-sort down-small</div>
                <div class="code-name">&amp;#xe877;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe878;</span>
                <div class="name">minus-square-fill</div>
                <div class="code-name">&amp;#xe878;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe879;</span>
                <div class="name">plus-square-fill</div>
                <div class="code-name">&amp;#xe879;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87a;</span>
                <div class="name">minus-square</div>
                <div class="code-name">&amp;#xe87a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87b;</span>
                <div class="name">plus-square</div>
                <div class="code-name">&amp;#xe87b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87d;</span>
                <div class="name">step mode</div>
                <div class="code-name">&amp;#xe87d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe87e;</span>
                <div class="name">scrolling mode</div>
                <div class="code-name">&amp;#xe87e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe881;</span>
                <div class="name">shopping cart</div>
                <div class="code-name">&amp;#xe881;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe882;</span>
                <div class="name">waiting-fill</div>
                <div class="code-name">&amp;#xe882;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe883;</span>
                <div class="name">waiting</div>
                <div class="code-name">&amp;#xe883;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe884;</span>
                <div class="name">right-arrow-rect</div>
                <div class="code-name">&amp;#xe884;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe885;</span>
                <div class="name">left-arrow-rect</div>
                <div class="code-name">&amp;#xe885;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe887;</span>
                <div class="name">bell</div>
                <div class="code-name">&amp;#xe887;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe888;</span>
                <div class="name">structured data</div>
                <div class="code-name">&amp;#xe888;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe769;</span>
                <div class="name">drag</div>
                <div class="code-name">&amp;#xe769;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe889;</span>
                <div class="name">vector</div>
                <div class="code-name">&amp;#xe889;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76a;</span>
                <div class="name">ellipsis-v</div>
                <div class="code-name">&amp;#xe76a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88a;</span>
                <div class="name">NEW</div>
                <div class="code-name">&amp;#xe88a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76b;</span>
                <div class="name">gallery-view</div>
                <div class="code-name">&amp;#xe76b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88b;</span>
                <div class="name">HOT</div>
                <div class="code-name">&amp;#xe88b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76c;</span>
                <div class="name">WIFI</div>
                <div class="code-name">&amp;#xe76c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88c;</span>
                <div class="name">home</div>
                <div class="code-name">&amp;#xe88c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76d;</span>
                <div class="name">bug-report</div>
                <div class="code-name">&amp;#xe76d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88e;</span>
                <div class="name">monitoring</div>
                <div class="code-name">&amp;#xe88e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76e;</span>
                <div class="name">qrcode</div>
                <div class="code-name">&amp;#xe76e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88f;</span>
                <div class="name">diagnose</div>
                <div class="code-name">&amp;#xe88f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe76f;</span>
                <div class="name">scan</div>
                <div class="code-name">&amp;#xe76f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe891;</span>
                <div class="name">loading</div>
                <div class="code-name">&amp;#xe891;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe770;</span>
                <div class="name">cut</div>
                <div class="code-name">&amp;#xe770;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe892;</span>
                <div class="name">Directory tree</div>
                <div class="code-name">&amp;#xe892;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe771;</span>
                <div class="name">gift</div>
                <div class="code-name">&amp;#xe771;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89e;</span>
                <div class="name">application</div>
                <div class="code-name">&amp;#xe89e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe772;</span>
                <div class="name">link</div>
                <div class="code-name">&amp;#xe772;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe89f;</span>
                <div class="name">application  group</div>
                <div class="code-name">&amp;#xe89f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe774;</span>
                <div class="name">poweroff</div>
                <div class="code-name">&amp;#xe774;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe775;</span>
                <div class="name">key</div>
                <div class="code-name">&amp;#xe775;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe776;</span>
                <div class="name">safety-certificate</div>
                <div class="code-name">&amp;#xe776;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe777;</span>
                <div class="name">supervise</div>
                <div class="code-name">&amp;#xe777;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78a;</span>
                <div class="name">tag-subscipt</div>
                <div class="code-name">&amp;#xe78a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78c;</span>
                <div class="name">chart-pie-alt</div>
                <div class="code-name">&amp;#xe78c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78d;</span>
                <div class="name">chart-relation</div>
                <div class="code-name">&amp;#xe78d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78e;</span>
                <div class="name">chart-scatter-plot</div>
                <div class="code-name">&amp;#xe78e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78f;</span>
                <div class="name">chart-area</div>
                <div class="code-name">&amp;#xe78f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe790;</span>
                <div class="name">chart-line</div>
                <div class="code-name">&amp;#xe790;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe791;</span>
                <div class="name">chart-bar</div>
                <div class="code-name">&amp;#xe791;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe792;</span>
                <div class="name">display-code</div>
                <div class="code-name">&amp;#xe792;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe793;</span>
                <div class="name">display-arrow-right</div>
                <div class="code-name">&amp;#xe793;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe794;</span>
                <div class="name">display-arrow-left</div>
                <div class="code-name">&amp;#xe794;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe795;</span>
                <div class="name">laptop-error</div>
                <div class="code-name">&amp;#xe795;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe796;</span>
                <div class="name">laptop-check</div>
                <div class="code-name">&amp;#xe796;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe797;</span>
                <div class="name">laptop</div>
                <div class="code-name">&amp;#xe797;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe798;</span>
                <div class="name">mobile-error</div>
                <div class="code-name">&amp;#xe798;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1666193350654'); /* IE9 */
  src: url('iconfont.eot?t=1666193350654#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('iconfont.woff2?t=1666193350654') format('woff2'),
       url('iconfont.woff?t=1666193350654') format('woff'),
       url('iconfont.ttf?t=1666193350654') format('truetype'),
       url('iconfont.svg?t=1666193350654#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-mobile-check"></span>
            <div class="name">
              mobile-check
            </div>
            <div class="code-name">.cdp-icon-mobile-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-mobile-alt"></span>
            <div class="name">
              mobile-alt
            </div>
            <div class="code-name">.cdp-icon-mobile-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-aliwangwang"></span>
            <div class="name">
              aliwangwang
            </div>
            <div class="code-name">.cdp-icon-aliwangwang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-nail"></span>
            <div class="name">
              nail
            </div>
            <div class="code-name">.cdp-icon-nail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-nail-fixed"></span>
            <div class="name">
              nail-fixed
            </div>
            <div class="code-name">.cdp-icon-nail-fixed
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.cdp-icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-dollar"></span>
            <div class="name">
              dollar
            </div>
            <div class="code-name">.cdp-icon-dollar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-transanction"></span>
            <div class="name">
              transanction
            </div>
            <div class="code-name">.cdp-icon-transanction
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-filter-fill"></span>
            <div class="name">
              filter-fill
            </div>
            <div class="code-name">.cdp-icon-filter-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-all-fill"></span>
            <div class="name">
              all-fill
            </div>
            <div class="code-name">.cdp-icon-all-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-databaseplus-fill"></span>
            <div class="name">
              database plus-fill
            </div>
            <div class="code-name">.cdp-icon-databaseplus-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-database-fill"></span>
            <div class="name">
              database-fill
            </div>
            <div class="code-name">.cdp-icon-database-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-commentlines-fill"></span>
            <div class="name">
              comment lines-fill
            </div>
            <div class="code-name">.cdp-icon-commentlines-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-commentdots-fill"></span>
            <div class="name">
              comment dots-fill
            </div>
            <div class="code-name">.cdp-icon-commentdots-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-paperplane-fill"></span>
            <div class="name">
              paper plane-fill
            </div>
            <div class="code-name">.cdp-icon-paperplane-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-eyeslash-fill"></span>
            <div class="name">
              eye slash-fill
            </div>
            <div class="code-name">.cdp-icon-eyeslash-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-eye-fill"></span>
            <div class="name">
              eye-fill
            </div>
            <div class="code-name">.cdp-icon-eye-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-lightbulb-fill"></span>
            <div class="name">
              lightbulb-fill
            </div>
            <div class="code-name">.cdp-icon-lightbulb-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-flag-fill"></span>
            <div class="name">
              flag-fill
            </div>
            <div class="code-name">.cdp-icon-flag-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-tag-fill"></span>
            <div class="name">
              tag-fill
            </div>
            <div class="code-name">.cdp-icon-tag-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-position-fill"></span>
            <div class="name">
              position-fill
            </div>
            <div class="code-name">.cdp-icon-position-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-location-fill"></span>
            <div class="name">
              location-fill
            </div>
            <div class="code-name">.cdp-icon-location-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-map-fill"></span>
            <div class="name">
              map-fill
            </div>
            <div class="code-name">.cdp-icon-map-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-inboxin-fill"></span>
            <div class="name">
              inbox in-fill
            </div>
            <div class="code-name">.cdp-icon-inboxin-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-box-fill"></span>
            <div class="name">
              box-fill
            </div>
            <div class="code-name">.cdp-icon-box-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-databaseset-fill"></span>
            <div class="name">
              database set-fill
            </div>
            <div class="code-name">.cdp-icon-databaseset-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-layergroup-fill"></span>
            <div class="name">
              layer group-fill
            </div>
            <div class="code-name">.cdp-icon-layergroup-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-cry-fill"></span>
            <div class="name">
              cry-fill
            </div>
            <div class="code-name">.cdp-icon-cry-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-smile-fill"></span>
            <div class="name">
              smile-fill
            </div>
            <div class="code-name">.cdp-icon-smile-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-unlock-fill"></span>
            <div class="name">
              unlock-fill
            </div>
            <div class="code-name">.cdp-icon-unlock-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-lock-fill"></span>
            <div class="name">
              lock-fill
            </div>
            <div class="code-name">.cdp-icon-lock-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-alignright-fill"></span>
            <div class="name">
              align right-fill
            </div>
            <div class="code-name">.cdp-icon-alignright-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-alignleft-fill"></span>
            <div class="name">
              align left-fill
            </div>
            <div class="code-name">.cdp-icon-alignleft-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-borderbottom-fill"></span>
            <div class="name">
              border bottom-fill
            </div>
            <div class="code-name">.cdp-icon-borderbottom-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-bordertop-fill"></span>
            <div class="name">
              border top-fill
            </div>
            <div class="code-name">.cdp-icon-bordertop-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-aligncenter-fill"></span>
            <div class="name">
              align center-fill
            </div>
            <div class="code-name">.cdp-icon-aligncenter-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-borderverticle-fill"></span>
            <div class="name">
              border verticle-fill
            </div>
            <div class="code-name">.cdp-icon-borderverticle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-piccenter-fill"></span>
            <div class="name">
              pic center-fill
            </div>
            <div class="code-name">.cdp-icon-piccenter-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-picside-fill"></span>
            <div class="name">
              pic side-fill
            </div>
            <div class="code-name">.cdp-icon-picside-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-folderopen-fill"></span>
            <div class="name">
              folder open-fill
            </div>
            <div class="code-name">.cdp-icon-folderopen-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-folderplus-fill"></span>
            <div class="name">
              folder plus-fill
            </div>
            <div class="code-name">.cdp-icon-folderplus-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-folder-fill"></span>
            <div class="name">
              folder-fill
            </div>
            <div class="code-name">.cdp-icon-folder-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-file-SQL"></span>
            <div class="name">
              file-SQL
            </div>
            <div class="code-name">.cdp-icon-file-SQL
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-fileplus-fill"></span>
            <div class="name">
              file plus-fill
            </div>
            <div class="code-name">.cdp-icon-fileplus-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-file-fill"></span>
            <div class="name">
              file-fill
            </div>
            <div class="code-name">.cdp-icon-file-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-copy-fill"></span>
            <div class="name">
              copy-fill
            </div>
            <div class="code-name">.cdp-icon-copy-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-headset-fill"></span>
            <div class="name">
              headset-fill
            </div>
            <div class="code-name">.cdp-icon-headset-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-phone-fill"></span>
            <div class="name">
              phone-fill
            </div>
            <div class="code-name">.cdp-icon-phone-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-pausecircle-fill"></span>
            <div class="name">
              pause circle-fill
            </div>
            <div class="code-name">.cdp-icon-pausecircle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-stopcircle-fill"></span>
            <div class="name">
              stop circle-fill
            </div>
            <div class="code-name">.cdp-icon-stopcircle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-playcircle-fill"></span>
            <div class="name">
              play circle-fill
            </div>
            <div class="code-name">.cdp-icon-playcircle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-delete-fill"></span>
            <div class="name">
              delete-fill
            </div>
            <div class="code-name">.cdp-icon-delete-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-picture-fill"></span>
            <div class="name">
              picture-fill
            </div>
            <div class="code-name">.cdp-icon-picture-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-mail-fill"></span>
            <div class="name">
              mail-fill
            </div>
            <div class="code-name">.cdp-icon-mail-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-heart-fill"></span>
            <div class="name">
              heart-fill
            </div>
            <div class="code-name">.cdp-icon-heart-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-collection-fill"></span>
            <div class="name">
              collection-fill
            </div>
            <div class="code-name">.cdp-icon-collection-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-user-group-fill"></span>
            <div class="name">
              user-group-fill
            </div>
            <div class="code-name">.cdp-icon-user-group-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-userplus-fill"></span>
            <div class="name">
              user plus-fill
            </div>
            <div class="code-name">.cdp-icon-userplus-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-user-fill"></span>
            <div class="name">
              user-fill
            </div>
            <div class="code-name">.cdp-icon-user-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-cog-fill"></span>
            <div class="name">
              cog-fill
            </div>
            <div class="code-name">.cdp-icon-cog-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-clock-fill"></span>
            <div class="name">
              clock-fill
            </div>
            <div class="code-name">.cdp-icon-clock-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-calendaralt-fill"></span>
            <div class="name">
              calendar alt-fill
            </div>
            <div class="code-name">.cdp-icon-calendaralt-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-clouddownload-fill"></span>
            <div class="name">
              cloud download-fill
            </div>
            <div class="code-name">.cdp-icon-clouddownload-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-cloudupload-fill"></span>
            <div class="name">
              cloud upload-fill
            </div>
            <div class="code-name">.cdp-icon-cloudupload-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-exchange-fill"></span>
            <div class="name">
              exchange-fill
            </div>
            <div class="code-name">.cdp-icon-exchange-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-info-circle-fill"></span>
            <div class="name">
              info-circle-fill
            </div>
            <div class="code-name">.cdp-icon-info-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-question-circle-fill"></span>
            <div class="name">
              question-circle-fill
            </div>
            <div class="code-name">.cdp-icon-question-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-exclamationcircle-f"></span>
            <div class="name">
              exclamation circle-f
            </div>
            <div class="code-name">.cdp-icon-exclamationcircle-f
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-minus-circle-fill"></span>
            <div class="name">
              minus-circle-fill
            </div>
            <div class="code-name">.cdp-icon-minus-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-plus-circle-fill"></span>
            <div class="name">
              plus-circle-fill
            </div>
            <div class="code-name">.cdp-icon-plus-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-times-circle-fill"></span>
            <div class="name">
              times-circle-fill
            </div>
            <div class="code-name">.cdp-icon-times-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-check-circle-fill"></span>
            <div class="name">
              check-circle-fill
            </div>
            <div class="code-name">.cdp-icon-check-circle-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-compressalt-fill"></span>
            <div class="name">
              compress alt-fill
            </div>
            <div class="code-name">.cdp-icon-compressalt-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-expandalt-fill"></span>
            <div class="name">
              expand alt-fill
            </div>
            <div class="code-name">.cdp-icon-expandalt-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-filter"></span>
            <div class="name">
              filter
            </div>
            <div class="code-name">.cdp-icon-filter
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-all"></span>
            <div class="name">
              all
            </div>
            <div class="code-name">.cdp-icon-all
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-database-plus"></span>
            <div class="name">
              database-plus
            </div>
            <div class="code-name">.cdp-icon-database-plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-database"></span>
            <div class="name">
              database
            </div>
            <div class="code-name">.cdp-icon-database
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-comment-lines"></span>
            <div class="name">
              comment-lines
            </div>
            <div class="code-name">.cdp-icon-comment-lines
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-comment-dots"></span>
            <div class="name">
              comment-dots
            </div>
            <div class="code-name">.cdp-icon-comment-dots
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-paper-plane"></span>
            <div class="name">
              paper-plane
            </div>
            <div class="code-name">.cdp-icon-paper-plane
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-eye-slash"></span>
            <div class="name">
              eye-slash
            </div>
            <div class="code-name">.cdp-icon-eye-slash
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-eye"></span>
            <div class="name">
              eye
            </div>
            <div class="code-name">.cdp-icon-eye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-lightbulb"></span>
            <div class="name">
              lightbulb
            </div>
            <div class="code-name">.cdp-icon-lightbulb
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-flag"></span>
            <div class="name">
              flag
            </div>
            <div class="code-name">.cdp-icon-flag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-tag"></span>
            <div class="name">
              tag
            </div>
            <div class="code-name">.cdp-icon-tag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-position"></span>
            <div class="name">
              position
            </div>
            <div class="code-name">.cdp-icon-position
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-location"></span>
            <div class="name">
              location
            </div>
            <div class="code-name">.cdp-icon-location
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-map"></span>
            <div class="name">
              map
            </div>
            <div class="code-name">.cdp-icon-map
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-inbox-in"></span>
            <div class="name">
              inbox-in
            </div>
            <div class="code-name">.cdp-icon-inbox-in
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-box"></span>
            <div class="name">
              box
            </div>
            <div class="code-name">.cdp-icon-box
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-database-set"></span>
            <div class="name">
              database-set
            </div>
            <div class="code-name">.cdp-icon-database-set
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-layer-group"></span>
            <div class="name">
              layer-group
            </div>
            <div class="code-name">.cdp-icon-layer-group
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-wind-cry"></span>
            <div class="name">
              wind-cry
            </div>
            <div class="code-name">.cdp-icon-wind-cry
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-wind-smile"></span>
            <div class="name">
              wind-smile
            </div>
            <div class="code-name">.cdp-icon-wind-smile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-unlock"></span>
            <div class="name">
              unlock
            </div>
            <div class="code-name">.cdp-icon-unlock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-lock"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.cdp-icon-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-align-right"></span>
            <div class="name">
              align-right
            </div>
            <div class="code-name">.cdp-icon-align-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-align-left"></span>
            <div class="name">
              align-left
            </div>
            <div class="code-name">.cdp-icon-align-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-border-bottom"></span>
            <div class="name">
              border-bottom
            </div>
            <div class="code-name">.cdp-icon-border-bottom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-border-top"></span>
            <div class="name">
              border-top
            </div>
            <div class="code-name">.cdp-icon-border-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-align-center"></span>
            <div class="name">
              align-center
            </div>
            <div class="code-name">.cdp-icon-align-center
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-border-verticle"></span>
            <div class="name">
              border-verticle
            </div>
            <div class="code-name">.cdp-icon-border-verticle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-pic-center"></span>
            <div class="name">
              pic-center
            </div>
            <div class="code-name">.cdp-icon-pic-center
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-pic-side"></span>
            <div class="name">
              pic-side
            </div>
            <div class="code-name">.cdp-icon-pic-side
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-folder-open"></span>
            <div class="name">
              folder-open
            </div>
            <div class="code-name">.cdp-icon-folder-open
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-folder-plus"></span>
            <div class="name">
              folder-plus
            </div>
            <div class="code-name">.cdp-icon-folder-plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-folder"></span>
            <div class="name">
              folder
            </div>
            <div class="code-name">.cdp-icon-folder
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-file-SQL1"></span>
            <div class="name">
              file-SQL
            </div>
            <div class="code-name">.cdp-icon-file-SQL1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-file-plus"></span>
            <div class="name">
              file-plus
            </div>
            <div class="code-name">.cdp-icon-file-plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-file"></span>
            <div class="name">
              file
            </div>
            <div class="code-name">.cdp-icon-file
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-copy"></span>
            <div class="name">
              copy
            </div>
            <div class="code-name">.cdp-icon-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-headset"></span>
            <div class="name">
              headset
            </div>
            <div class="code-name">.cdp-icon-headset
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-phone"></span>
            <div class="name">
              phone
            </div>
            <div class="code-name">.cdp-icon-phone
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-pausecircle"></span>
            <div class="name">
              pause circle
            </div>
            <div class="code-name">.cdp-icon-pausecircle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-stopcircle"></span>
            <div class="name">
              stop circle
            </div>
            <div class="code-name">.cdp-icon-stopcircle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-playcircle"></span>
            <div class="name">
              play circle
            </div>
            <div class="code-name">.cdp-icon-playcircle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-delete"></span>
            <div class="name">
              delete
            </div>
            <div class="code-name">.cdp-icon-delete
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-picture"></span>
            <div class="name">
              picture
            </div>
            <div class="code-name">.cdp-icon-picture
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-mail"></span>
            <div class="name">
              mail
            </div>
            <div class="code-name">.cdp-icon-mail
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-like"></span>
            <div class="name">
              like
            </div>
            <div class="code-name">.cdp-icon-like
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-collection"></span>
            <div class="name">
              collection
            </div>
            <div class="code-name">.cdp-icon-collection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-user-group"></span>
            <div class="name">
              user-group
            </div>
            <div class="code-name">.cdp-icon-user-group
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-account-plus"></span>
            <div class="name">
              account-plus
            </div>
            <div class="code-name">.cdp-icon-account-plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-account"></span>
            <div class="name">
              account
            </div>
            <div class="code-name">.cdp-icon-account
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-cog"></span>
            <div class="name">
              cog
            </div>
            <div class="code-name">.cdp-icon-cog
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-clock"></span>
            <div class="name">
              clock
            </div>
            <div class="code-name">.cdp-icon-clock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-calendar-alt"></span>
            <div class="name">
              calendar-alt
            </div>
            <div class="code-name">.cdp-icon-calendar-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-clouddownload"></span>
            <div class="name">
              cloud download
            </div>
            <div class="code-name">.cdp-icon-clouddownload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-cloudupload"></span>
            <div class="name">
              cloud upload
            </div>
            <div class="code-name">.cdp-icon-cloudupload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-exchange"></span>
            <div class="name">
              exchange
            </div>
            <div class="code-name">.cdp-icon-exchange
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-info-circle"></span>
            <div class="name">
              info-circle
            </div>
            <div class="code-name">.cdp-icon-info-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-question-circle"></span>
            <div class="name">
              question-circle
            </div>
            <div class="code-name">.cdp-icon-question-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-exclamation-circle"></span>
            <div class="name">
              exclamation-circle
            </div>
            <div class="code-name">.cdp-icon-exclamation-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-minus-circle"></span>
            <div class="name">
              minus-circle
            </div>
            <div class="code-name">.cdp-icon-minus-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-plus-circle"></span>
            <div class="name">
              plus-circle
            </div>
            <div class="code-name">.cdp-icon-plus-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-times-circle"></span>
            <div class="name">
              times-circle
            </div>
            <div class="code-name">.cdp-icon-times-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-check-circle"></span>
            <div class="name">
              check-circle
            </div>
            <div class="code-name">.cdp-icon-check-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-compress-alt"></span>
            <div class="name">
              compress-alt
            </div>
            <div class="code-name">.cdp-icon-compress-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-expand-alt"></span>
            <div class="name">
              expand-alt
            </div>
            <div class="code-name">.cdp-icon-expand-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-ban"></span>
            <div class="name">
              ban
            </div>
            <div class="code-name">.cdp-icon-ban
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-minus"></span>
            <div class="name">
              minus
            </div>
            <div class="code-name">.cdp-icon-minus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-plus"></span>
            <div class="name">
              plus
            </div>
            <div class="code-name">.cdp-icon-plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-times"></span>
            <div class="name">
              times
            </div>
            <div class="code-name">.cdp-icon-times
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-check"></span>
            <div class="name">
              check
            </div>
            <div class="code-name">.cdp-icon-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-search-minus"></span>
            <div class="name">
              search-minus
            </div>
            <div class="code-name">.cdp-icon-search-minus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-search-plus"></span>
            <div class="name">
              search-plus
            </div>
            <div class="code-name">.cdp-icon-search-plus
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.cdp-icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-reply"></span>
            <div class="name">
              reply
            </div>
            <div class="code-name">.cdp-icon-reply
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-undo"></span>
            <div class="name">
              undo
            </div>
            <div class="code-name">.cdp-icon-undo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-redo"></span>
            <div class="name">
              redo
            </div>
            <div class="code-name">.cdp-icon-redo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-external-link"></span>
            <div class="name">
              external-link
            </div>
            <div class="code-name">.cdp-icon-external-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-arrows-alt"></span>
            <div class="name">
              arrows-alt
            </div>
            <div class="code-name">.cdp-icon-arrows-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-indent"></span>
            <div class="name">
              indent
            </div>
            <div class="code-name">.cdp-icon-indent
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-outdent"></span>
            <div class="name">
              outdent
            </div>
            <div class="code-name">.cdp-icon-outdent
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-sort-line"></span>
            <div class="name">
              sort-line
            </div>
            <div class="code-name">.cdp-icon-sort-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-switch"></span>
            <div class="name">
              switch
            </div>
            <div class="code-name">.cdp-icon-switch
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-wind-descending"></span>
            <div class="name">
              wind-descending
            </div>
            <div class="code-name">.cdp-icon-wind-descending
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-wind-ascending"></span>
            <div class="name">
              wind-ascending
            </div>
            <div class="code-name">.cdp-icon-wind-ascending
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-download"></span>
            <div class="name">
              download
            </div>
            <div class="code-name">.cdp-icon-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-upload"></span>
            <div class="name">
              upload
            </div>
            <div class="code-name">.cdp-icon-upload
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-arrow-to-bottom"></span>
            <div class="name">
              arrow-to-bottom
            </div>
            <div class="code-name">.cdp-icon-arrow-to-bottom
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-arrow-to-top"></span>
            <div class="name">
              arrow-to-top
            </div>
            <div class="code-name">.cdp-icon-arrow-to-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-long-arrow-down"></span>
            <div class="name">
              long-arrow-down
            </div>
            <div class="code-name">.cdp-icon-long-arrow-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-long-arrow-up"></span>
            <div class="name">
              long-arrow-up
            </div>
            <div class="code-name">.cdp-icon-long-arrow-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-arrow-right"></span>
            <div class="name">
              arrow-right
            </div>
            <div class="code-name">.cdp-icon-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-arrow-left"></span>
            <div class="name">
              arrow-left
            </div>
            <div class="code-name">.cdp-icon-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-sort"></span>
            <div class="name">
              sort
            </div>
            <div class="code-name">.cdp-icon-sort
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-sort-down"></span>
            <div class="name">
              sort-down
            </div>
            <div class="code-name">.cdp-icon-sort-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-sort-up"></span>
            <div class="name">
              sort-up
            </div>
            <div class="code-name">.cdp-icon-sort-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-caret-right"></span>
            <div class="name">
              caret-right
            </div>
            <div class="code-name">.cdp-icon-caret-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-caret-left"></span>
            <div class="name">
              caret-left
            </div>
            <div class="code-name">.cdp-icon-caret-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-arrows-v"></span>
            <div class="name">
              arrows-v
            </div>
            <div class="code-name">.cdp-icon-arrows-v
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-angle-double-down"></span>
            <div class="name">
              angle- double-down
            </div>
            <div class="code-name">.cdp-icon-angle-double-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-angle-double-up"></span>
            <div class="name">
              angle-double-up
            </div>
            <div class="code-name">.cdp-icon-angle-double-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-angle-double-right"></span>
            <div class="name">
              angle-double-right
            </div>
            <div class="code-name">.cdp-icon-angle-double-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-angle-double-left"></span>
            <div class="name">
              angle-double-left
            </div>
            <div class="code-name">.cdp-icon-angle-double-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-angle-down"></span>
            <div class="name">
              angle-down
            </div>
            <div class="code-name">.cdp-icon-angle-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-angle-up"></span>
            <div class="name">
              angle-up
            </div>
            <div class="code-name">.cdp-icon-angle-up
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-angle-right"></span>
            <div class="name">
              angle-right
            </div>
            <div class="code-name">.cdp-icon-angle-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-angle-left"></span>
            <div class="name">
              angle-left
            </div>
            <div class="code-name">.cdp-icon-angle-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-paperclip"></span>
            <div class="name">
              paperclip
            </div>
            <div class="code-name">.cdp-icon-paperclip
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-connection"></span>
            <div class="name">
              connection
            </div>
            <div class="code-name">.cdp-icon-connection
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-training"></span>
            <div class="name">
              training
            </div>
            <div class="code-name">.cdp-icon-training
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-process"></span>
            <div class="name">
              process
            </div>
            <div class="code-name">.cdp-icon-process
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-news"></span>
            <div class="name">
              news
            </div>
            <div class="code-name">.cdp-icon-news
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-save"></span>
            <div class="name">
              save
            </div>
            <div class="code-name">.cdp-icon-save
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-print"></span>
            <div class="name">
              print
            </div>
            <div class="code-name">.cdp-icon-print
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-new-releases"></span>
            <div class="name">
              new-releases
            </div>
            <div class="code-name">.cdp-icon-new-releases
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-release"></span>
            <div class="name">
              release
            </div>
            <div class="code-name">.cdp-icon-release
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-alert"></span>
            <div class="name">
              alert
            </div>
            <div class="code-name">.cdp-icon-alert
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-backspace"></span>
            <div class="name">
              backspace
            </div>
            <div class="code-name">.cdp-icon-backspace
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-gem"></span>
            <div class="name">
              gem
            </div>
            <div class="code-name">.cdp-icon-gem
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-integral"></span>
            <div class="name">
              integral
            </div>
            <div class="code-name">.cdp-icon-integral
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-star-circle"></span>
            <div class="name">
              star-circle
            </div>
            <div class="code-name">.cdp-icon-star-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-user-circle"></span>
            <div class="name">
              user-circle
            </div>
            <div class="code-name">.cdp-icon-user-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-cloud-machine-fill"></span>
            <div class="name">
              cloud-machine-fill
            </div>
            <div class="code-name">.cdp-icon-cloud-machine-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-cloud-machine"></span>
            <div class="name">
              cloud-machine
            </div>
            <div class="code-name">.cdp-icon-cloud-machine
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-terminal-fill"></span>
            <div class="name">
              terminal-fill
            </div>
            <div class="code-name">.cdp-icon-terminal-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-terminal"></span>
            <div class="name">
              terminal
            </div>
            <div class="code-name">.cdp-icon-terminal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-shopping-cart-fill"></span>
            <div class="name">
              shopping-cart-fill
            </div>
            <div class="code-name">.cdp-icon-shopping-cart-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-resource"></span>
            <div class="name">
              resource
            </div>
            <div class="code-name">.cdp-icon-resource
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-rank"></span>
            <div class="name">
              rank
            </div>
            <div class="code-name">.cdp-icon-rank
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-sync-alt"></span>
            <div class="name">
              sync-alt
            </div>
            <div class="code-name">.cdp-icon-sync-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-compass"></span>
            <div class="name">
              compass
            </div>
            <div class="code-name">.cdp-icon-compass
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-arrow-alt-from-top"></span>
            <div class="name">
              arrow-alt- from-top
            </div>
            <div class="code-name">.cdp-icon-arrow-alt-from-top
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-arrow-alt-from-botto"></span>
            <div class="name">
              arrow-alt-from-botto
            </div>
            <div class="code-name">.cdp-icon-arrow-alt-from-botto
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-menu"></span>
            <div class="name">
              menu
            </div>
            <div class="code-name">.cdp-icon-menu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-icon-drag"></span>
            <div class="name">
              icon-drag
            </div>
            <div class="code-name">.cdp-icon-icon-drag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-early-warning"></span>
            <div class="name">
              early-warning
            </div>
            <div class="code-name">.cdp-icon-early-warning
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-share"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.cdp-icon-share
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-share1"></span>
            <div class="name">
              share
            </div>
            <div class="code-name">.cdp-icon-share1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-management-"></span>
            <div class="name">
              management
            </div>
            <div class="code-name">.cdp-icon-management-
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-accesskeys"></span>
            <div class="name">
              accesskeys
            </div>
            <div class="code-name">.cdp-icon-accesskeys
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-arrow-sortdown-smal"></span>
            <div class="name">
              arrow-sort down-small
            </div>
            <div class="code-name">.cdp-icon-arrow-sortdown-smal
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-minus-square-fill"></span>
            <div class="name">
              minus-square-fill
            </div>
            <div class="code-name">.cdp-icon-minus-square-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-plus-square-fill"></span>
            <div class="name">
              plus-square-fill
            </div>
            <div class="code-name">.cdp-icon-plus-square-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-minus-square"></span>
            <div class="name">
              minus-square
            </div>
            <div class="code-name">.cdp-icon-minus-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-plus-square"></span>
            <div class="name">
              plus-square
            </div>
            <div class="code-name">.cdp-icon-plus-square
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-stepmode"></span>
            <div class="name">
              step mode
            </div>
            <div class="code-name">.cdp-icon-stepmode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-scrollingmode"></span>
            <div class="name">
              scrolling mode
            </div>
            <div class="code-name">.cdp-icon-scrollingmode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-shoppingcart"></span>
            <div class="name">
              shopping cart
            </div>
            <div class="code-name">.cdp-icon-shoppingcart
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-waiting-fill"></span>
            <div class="name">
              waiting-fill
            </div>
            <div class="code-name">.cdp-icon-waiting-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-waiting"></span>
            <div class="name">
              waiting
            </div>
            <div class="code-name">.cdp-icon-waiting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-right-arrow-rect"></span>
            <div class="name">
              right-arrow-rect
            </div>
            <div class="code-name">.cdp-icon-right-arrow-rect
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-left-arrow-rect"></span>
            <div class="name">
              left-arrow-rect
            </div>
            <div class="code-name">.cdp-icon-left-arrow-rect
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-bell"></span>
            <div class="name">
              bell
            </div>
            <div class="code-name">.cdp-icon-bell
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-structured-data"></span>
            <div class="name">
              structured data
            </div>
            <div class="code-name">.cdp-icon-structured-data
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-drag"></span>
            <div class="name">
              drag
            </div>
            <div class="code-name">.cdp-icon-drag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-vector"></span>
            <div class="name">
              vector
            </div>
            <div class="code-name">.cdp-icon-vector
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-ellipsis-vertical"></span>
            <div class="name">
              ellipsis-v
            </div>
            <div class="code-name">.cdp-icon-ellipsis-vertical
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-NEW-copy"></span>
            <div class="name">
              NEW
            </div>
            <div class="code-name">.cdp-icon-NEW-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-gallery-view"></span>
            <div class="name">
              gallery-view
            </div>
            <div class="code-name">.cdp-icon-gallery-view
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-HOT-copy"></span>
            <div class="name">
              HOT
            </div>
            <div class="code-name">.cdp-icon-HOT-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-WIFI"></span>
            <div class="name">
              WIFI
            </div>
            <div class="code-name">.cdp-icon-WIFI
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-home"></span>
            <div class="name">
              home
            </div>
            <div class="code-name">.cdp-icon-home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-bug-report"></span>
            <div class="name">
              bug-report
            </div>
            <div class="code-name">.cdp-icon-bug-report
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-monitoring"></span>
            <div class="name">
              monitoring
            </div>
            <div class="code-name">.cdp-icon-monitoring
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-qrcode"></span>
            <div class="name">
              qrcode
            </div>
            <div class="code-name">.cdp-icon-qrcode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-diagnose"></span>
            <div class="name">
              diagnose
            </div>
            <div class="code-name">.cdp-icon-diagnose
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-scan"></span>
            <div class="name">
              scan
            </div>
            <div class="code-name">.cdp-icon-scan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-loading"></span>
            <div class="name">
              loading
            </div>
            <div class="code-name">.cdp-icon-loading
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-cut"></span>
            <div class="name">
              cut
            </div>
            <div class="code-name">.cdp-icon-cut
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-Directory-tree"></span>
            <div class="name">
              Directory tree
            </div>
            <div class="code-name">.cdp-icon-Directory-tree
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-gift"></span>
            <div class="name">
              gift
            </div>
            <div class="code-name">.cdp-icon-gift
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-application"></span>
            <div class="name">
              application
            </div>
            <div class="code-name">.cdp-icon-application
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-link"></span>
            <div class="name">
              link
            </div>
            <div class="code-name">.cdp-icon-link
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-applicationgroup"></span>
            <div class="name">
              application  group
            </div>
            <div class="code-name">.cdp-icon-applicationgroup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-poweroff"></span>
            <div class="name">
              poweroff
            </div>
            <div class="code-name">.cdp-icon-poweroff
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-key"></span>
            <div class="name">
              key
            </div>
            <div class="code-name">.cdp-icon-key
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-safety-certificate"></span>
            <div class="name">
              safety-certificate
            </div>
            <div class="code-name">.cdp-icon-safety-certificate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-supervise"></span>
            <div class="name">
              supervise
            </div>
            <div class="code-name">.cdp-icon-supervise
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-tag-subscipt"></span>
            <div class="name">
              tag-subscipt
            </div>
            <div class="code-name">.cdp-icon-tag-subscipt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-chart-pie-alt"></span>
            <div class="name">
              chart-pie-alt
            </div>
            <div class="code-name">.cdp-icon-chart-pie-alt
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-chart-relation"></span>
            <div class="name">
              chart-relation
            </div>
            <div class="code-name">.cdp-icon-chart-relation
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-chart-scatter-plot"></span>
            <div class="name">
              chart-scatter-plot
            </div>
            <div class="code-name">.cdp-icon-chart-scatter-plot
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-chart-area"></span>
            <div class="name">
              chart-area
            </div>
            <div class="code-name">.cdp-icon-chart-area
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-chart-line"></span>
            <div class="name">
              chart-line
            </div>
            <div class="code-name">.cdp-icon-chart-line
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-chart-bar"></span>
            <div class="name">
              chart-bar
            </div>
            <div class="code-name">.cdp-icon-chart-bar
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-display-code"></span>
            <div class="name">
              display-code
            </div>
            <div class="code-name">.cdp-icon-display-code
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-display-arrow-right"></span>
            <div class="name">
              display-arrow-right
            </div>
            <div class="code-name">.cdp-icon-display-arrow-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-display-arrow-left"></span>
            <div class="name">
              display-arrow-left
            </div>
            <div class="code-name">.cdp-icon-display-arrow-left
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-laptop-error"></span>
            <div class="name">
              laptop-error
            </div>
            <div class="code-name">.cdp-icon-laptop-error
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-laptop-check"></span>
            <div class="name">
              laptop-check
            </div>
            <div class="code-name">.cdp-icon-laptop-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-laptop"></span>
            <div class="name">
              laptop
            </div>
            <div class="code-name">.cdp-icon-laptop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont cdp-icon-mobile-error"></span>
            <div class="name">
              mobile-error
            </div>
            <div class="code-name">.cdp-icon-mobile-error
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont cdp-icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-mobile-check"></use>
                </svg>
                <div class="name">mobile-check</div>
                <div class="code-name">#cdp-icon-mobile-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-mobile-alt"></use>
                </svg>
                <div class="name">mobile-alt</div>
                <div class="code-name">#cdp-icon-mobile-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-aliwangwang"></use>
                </svg>
                <div class="name">aliwangwang</div>
                <div class="code-name">#cdp-icon-aliwangwang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-nail"></use>
                </svg>
                <div class="name">nail</div>
                <div class="code-name">#cdp-icon-nail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-nail-fixed"></use>
                </svg>
                <div class="name">nail-fixed</div>
                <div class="code-name">#cdp-icon-nail-fixed</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#cdp-icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-dollar"></use>
                </svg>
                <div class="name">dollar</div>
                <div class="code-name">#cdp-icon-dollar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-transanction"></use>
                </svg>
                <div class="name">transanction</div>
                <div class="code-name">#cdp-icon-transanction</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-filter-fill"></use>
                </svg>
                <div class="name">filter-fill</div>
                <div class="code-name">#cdp-icon-filter-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-all-fill"></use>
                </svg>
                <div class="name">all-fill</div>
                <div class="code-name">#cdp-icon-all-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-databaseplus-fill"></use>
                </svg>
                <div class="name">database plus-fill</div>
                <div class="code-name">#cdp-icon-databaseplus-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-database-fill"></use>
                </svg>
                <div class="name">database-fill</div>
                <div class="code-name">#cdp-icon-database-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-commentlines-fill"></use>
                </svg>
                <div class="name">comment lines-fill</div>
                <div class="code-name">#cdp-icon-commentlines-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-commentdots-fill"></use>
                </svg>
                <div class="name">comment dots-fill</div>
                <div class="code-name">#cdp-icon-commentdots-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-paperplane-fill"></use>
                </svg>
                <div class="name">paper plane-fill</div>
                <div class="code-name">#cdp-icon-paperplane-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-eyeslash-fill"></use>
                </svg>
                <div class="name">eye slash-fill</div>
                <div class="code-name">#cdp-icon-eyeslash-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-eye-fill"></use>
                </svg>
                <div class="name">eye-fill</div>
                <div class="code-name">#cdp-icon-eye-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-lightbulb-fill"></use>
                </svg>
                <div class="name">lightbulb-fill</div>
                <div class="code-name">#cdp-icon-lightbulb-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-flag-fill"></use>
                </svg>
                <div class="name">flag-fill</div>
                <div class="code-name">#cdp-icon-flag-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-tag-fill"></use>
                </svg>
                <div class="name">tag-fill</div>
                <div class="code-name">#cdp-icon-tag-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-position-fill"></use>
                </svg>
                <div class="name">position-fill</div>
                <div class="code-name">#cdp-icon-position-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-location-fill"></use>
                </svg>
                <div class="name">location-fill</div>
                <div class="code-name">#cdp-icon-location-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-map-fill"></use>
                </svg>
                <div class="name">map-fill</div>
                <div class="code-name">#cdp-icon-map-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-inboxin-fill"></use>
                </svg>
                <div class="name">inbox in-fill</div>
                <div class="code-name">#cdp-icon-inboxin-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-box-fill"></use>
                </svg>
                <div class="name">box-fill</div>
                <div class="code-name">#cdp-icon-box-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-databaseset-fill"></use>
                </svg>
                <div class="name">database set-fill</div>
                <div class="code-name">#cdp-icon-databaseset-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-layergroup-fill"></use>
                </svg>
                <div class="name">layer group-fill</div>
                <div class="code-name">#cdp-icon-layergroup-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-cry-fill"></use>
                </svg>
                <div class="name">cry-fill</div>
                <div class="code-name">#cdp-icon-cry-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-smile-fill"></use>
                </svg>
                <div class="name">smile-fill</div>
                <div class="code-name">#cdp-icon-smile-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-unlock-fill"></use>
                </svg>
                <div class="name">unlock-fill</div>
                <div class="code-name">#cdp-icon-unlock-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-lock-fill"></use>
                </svg>
                <div class="name">lock-fill</div>
                <div class="code-name">#cdp-icon-lock-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-alignright-fill"></use>
                </svg>
                <div class="name">align right-fill</div>
                <div class="code-name">#cdp-icon-alignright-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-alignleft-fill"></use>
                </svg>
                <div class="name">align left-fill</div>
                <div class="code-name">#cdp-icon-alignleft-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-borderbottom-fill"></use>
                </svg>
                <div class="name">border bottom-fill</div>
                <div class="code-name">#cdp-icon-borderbottom-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-bordertop-fill"></use>
                </svg>
                <div class="name">border top-fill</div>
                <div class="code-name">#cdp-icon-bordertop-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-aligncenter-fill"></use>
                </svg>
                <div class="name">align center-fill</div>
                <div class="code-name">#cdp-icon-aligncenter-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-borderverticle-fill"></use>
                </svg>
                <div class="name">border verticle-fill</div>
                <div class="code-name">#cdp-icon-borderverticle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-piccenter-fill"></use>
                </svg>
                <div class="name">pic center-fill</div>
                <div class="code-name">#cdp-icon-piccenter-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-picside-fill"></use>
                </svg>
                <div class="name">pic side-fill</div>
                <div class="code-name">#cdp-icon-picside-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-folderopen-fill"></use>
                </svg>
                <div class="name">folder open-fill</div>
                <div class="code-name">#cdp-icon-folderopen-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-folderplus-fill"></use>
                </svg>
                <div class="name">folder plus-fill</div>
                <div class="code-name">#cdp-icon-folderplus-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-folder-fill"></use>
                </svg>
                <div class="name">folder-fill</div>
                <div class="code-name">#cdp-icon-folder-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-file-SQL"></use>
                </svg>
                <div class="name">file-SQL</div>
                <div class="code-name">#cdp-icon-file-SQL</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-fileplus-fill"></use>
                </svg>
                <div class="name">file plus-fill</div>
                <div class="code-name">#cdp-icon-fileplus-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-file-fill"></use>
                </svg>
                <div class="name">file-fill</div>
                <div class="code-name">#cdp-icon-file-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-copy-fill"></use>
                </svg>
                <div class="name">copy-fill</div>
                <div class="code-name">#cdp-icon-copy-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-headset-fill"></use>
                </svg>
                <div class="name">headset-fill</div>
                <div class="code-name">#cdp-icon-headset-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-phone-fill"></use>
                </svg>
                <div class="name">phone-fill</div>
                <div class="code-name">#cdp-icon-phone-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-pausecircle-fill"></use>
                </svg>
                <div class="name">pause circle-fill</div>
                <div class="code-name">#cdp-icon-pausecircle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-stopcircle-fill"></use>
                </svg>
                <div class="name">stop circle-fill</div>
                <div class="code-name">#cdp-icon-stopcircle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-playcircle-fill"></use>
                </svg>
                <div class="name">play circle-fill</div>
                <div class="code-name">#cdp-icon-playcircle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-delete-fill"></use>
                </svg>
                <div class="name">delete-fill</div>
                <div class="code-name">#cdp-icon-delete-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-picture-fill"></use>
                </svg>
                <div class="name">picture-fill</div>
                <div class="code-name">#cdp-icon-picture-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-mail-fill"></use>
                </svg>
                <div class="name">mail-fill</div>
                <div class="code-name">#cdp-icon-mail-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-heart-fill"></use>
                </svg>
                <div class="name">heart-fill</div>
                <div class="code-name">#cdp-icon-heart-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-collection-fill"></use>
                </svg>
                <div class="name">collection-fill</div>
                <div class="code-name">#cdp-icon-collection-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-user-group-fill"></use>
                </svg>
                <div class="name">user-group-fill</div>
                <div class="code-name">#cdp-icon-user-group-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-userplus-fill"></use>
                </svg>
                <div class="name">user plus-fill</div>
                <div class="code-name">#cdp-icon-userplus-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-user-fill"></use>
                </svg>
                <div class="name">user-fill</div>
                <div class="code-name">#cdp-icon-user-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-cog-fill"></use>
                </svg>
                <div class="name">cog-fill</div>
                <div class="code-name">#cdp-icon-cog-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-clock-fill"></use>
                </svg>
                <div class="name">clock-fill</div>
                <div class="code-name">#cdp-icon-clock-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-calendaralt-fill"></use>
                </svg>
                <div class="name">calendar alt-fill</div>
                <div class="code-name">#cdp-icon-calendaralt-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-clouddownload-fill"></use>
                </svg>
                <div class="name">cloud download-fill</div>
                <div class="code-name">#cdp-icon-clouddownload-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-cloudupload-fill"></use>
                </svg>
                <div class="name">cloud upload-fill</div>
                <div class="code-name">#cdp-icon-cloudupload-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-exchange-fill"></use>
                </svg>
                <div class="name">exchange-fill</div>
                <div class="code-name">#cdp-icon-exchange-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-info-circle-fill"></use>
                </svg>
                <div class="name">info-circle-fill</div>
                <div class="code-name">#cdp-icon-info-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-question-circle-fill"></use>
                </svg>
                <div class="name">question-circle-fill</div>
                <div class="code-name">#cdp-icon-question-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-exclamationcircle-f"></use>
                </svg>
                <div class="name">exclamation circle-f</div>
                <div class="code-name">#cdp-icon-exclamationcircle-f</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-minus-circle-fill"></use>
                </svg>
                <div class="name">minus-circle-fill</div>
                <div class="code-name">#cdp-icon-minus-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-plus-circle-fill"></use>
                </svg>
                <div class="name">plus-circle-fill</div>
                <div class="code-name">#cdp-icon-plus-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-times-circle-fill"></use>
                </svg>
                <div class="name">times-circle-fill</div>
                <div class="code-name">#cdp-icon-times-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-check-circle-fill"></use>
                </svg>
                <div class="name">check-circle-fill</div>
                <div class="code-name">#cdp-icon-check-circle-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-compressalt-fill"></use>
                </svg>
                <div class="name">compress alt-fill</div>
                <div class="code-name">#cdp-icon-compressalt-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-expandalt-fill"></use>
                </svg>
                <div class="name">expand alt-fill</div>
                <div class="code-name">#cdp-icon-expandalt-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-filter"></use>
                </svg>
                <div class="name">filter</div>
                <div class="code-name">#cdp-icon-filter</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-all"></use>
                </svg>
                <div class="name">all</div>
                <div class="code-name">#cdp-icon-all</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-database-plus"></use>
                </svg>
                <div class="name">database-plus</div>
                <div class="code-name">#cdp-icon-database-plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-database"></use>
                </svg>
                <div class="name">database</div>
                <div class="code-name">#cdp-icon-database</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-comment-lines"></use>
                </svg>
                <div class="name">comment-lines</div>
                <div class="code-name">#cdp-icon-comment-lines</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-comment-dots"></use>
                </svg>
                <div class="name">comment-dots</div>
                <div class="code-name">#cdp-icon-comment-dots</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-paper-plane"></use>
                </svg>
                <div class="name">paper-plane</div>
                <div class="code-name">#cdp-icon-paper-plane</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-eye-slash"></use>
                </svg>
                <div class="name">eye-slash</div>
                <div class="code-name">#cdp-icon-eye-slash</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-eye"></use>
                </svg>
                <div class="name">eye</div>
                <div class="code-name">#cdp-icon-eye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-lightbulb"></use>
                </svg>
                <div class="name">lightbulb</div>
                <div class="code-name">#cdp-icon-lightbulb</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-flag"></use>
                </svg>
                <div class="name">flag</div>
                <div class="code-name">#cdp-icon-flag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-tag"></use>
                </svg>
                <div class="name">tag</div>
                <div class="code-name">#cdp-icon-tag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-position"></use>
                </svg>
                <div class="name">position</div>
                <div class="code-name">#cdp-icon-position</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-location"></use>
                </svg>
                <div class="name">location</div>
                <div class="code-name">#cdp-icon-location</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-map"></use>
                </svg>
                <div class="name">map</div>
                <div class="code-name">#cdp-icon-map</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-inbox-in"></use>
                </svg>
                <div class="name">inbox-in</div>
                <div class="code-name">#cdp-icon-inbox-in</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-box"></use>
                </svg>
                <div class="name">box</div>
                <div class="code-name">#cdp-icon-box</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-database-set"></use>
                </svg>
                <div class="name">database-set</div>
                <div class="code-name">#cdp-icon-database-set</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-layer-group"></use>
                </svg>
                <div class="name">layer-group</div>
                <div class="code-name">#cdp-icon-layer-group</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-wind-cry"></use>
                </svg>
                <div class="name">wind-cry</div>
                <div class="code-name">#cdp-icon-wind-cry</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-wind-smile"></use>
                </svg>
                <div class="name">wind-smile</div>
                <div class="code-name">#cdp-icon-wind-smile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-unlock"></use>
                </svg>
                <div class="name">unlock</div>
                <div class="code-name">#cdp-icon-unlock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-lock"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#cdp-icon-lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-align-right"></use>
                </svg>
                <div class="name">align-right</div>
                <div class="code-name">#cdp-icon-align-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-align-left"></use>
                </svg>
                <div class="name">align-left</div>
                <div class="code-name">#cdp-icon-align-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-border-bottom"></use>
                </svg>
                <div class="name">border-bottom</div>
                <div class="code-name">#cdp-icon-border-bottom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-border-top"></use>
                </svg>
                <div class="name">border-top</div>
                <div class="code-name">#cdp-icon-border-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-align-center"></use>
                </svg>
                <div class="name">align-center</div>
                <div class="code-name">#cdp-icon-align-center</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-border-verticle"></use>
                </svg>
                <div class="name">border-verticle</div>
                <div class="code-name">#cdp-icon-border-verticle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-pic-center"></use>
                </svg>
                <div class="name">pic-center</div>
                <div class="code-name">#cdp-icon-pic-center</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-pic-side"></use>
                </svg>
                <div class="name">pic-side</div>
                <div class="code-name">#cdp-icon-pic-side</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-folder-open"></use>
                </svg>
                <div class="name">folder-open</div>
                <div class="code-name">#cdp-icon-folder-open</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-folder-plus"></use>
                </svg>
                <div class="name">folder-plus</div>
                <div class="code-name">#cdp-icon-folder-plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-folder"></use>
                </svg>
                <div class="name">folder</div>
                <div class="code-name">#cdp-icon-folder</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-file-SQL1"></use>
                </svg>
                <div class="name">file-SQL</div>
                <div class="code-name">#cdp-icon-file-SQL1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-file-plus"></use>
                </svg>
                <div class="name">file-plus</div>
                <div class="code-name">#cdp-icon-file-plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-file"></use>
                </svg>
                <div class="name">file</div>
                <div class="code-name">#cdp-icon-file</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-copy"></use>
                </svg>
                <div class="name">copy</div>
                <div class="code-name">#cdp-icon-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-headset"></use>
                </svg>
                <div class="name">headset</div>
                <div class="code-name">#cdp-icon-headset</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-phone"></use>
                </svg>
                <div class="name">phone</div>
                <div class="code-name">#cdp-icon-phone</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-pausecircle"></use>
                </svg>
                <div class="name">pause circle</div>
                <div class="code-name">#cdp-icon-pausecircle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-stopcircle"></use>
                </svg>
                <div class="name">stop circle</div>
                <div class="code-name">#cdp-icon-stopcircle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-playcircle"></use>
                </svg>
                <div class="name">play circle</div>
                <div class="code-name">#cdp-icon-playcircle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-delete"></use>
                </svg>
                <div class="name">delete</div>
                <div class="code-name">#cdp-icon-delete</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-picture"></use>
                </svg>
                <div class="name">picture</div>
                <div class="code-name">#cdp-icon-picture</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-mail"></use>
                </svg>
                <div class="name">mail</div>
                <div class="code-name">#cdp-icon-mail</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-like"></use>
                </svg>
                <div class="name">like</div>
                <div class="code-name">#cdp-icon-like</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-collection"></use>
                </svg>
                <div class="name">collection</div>
                <div class="code-name">#cdp-icon-collection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-user-group"></use>
                </svg>
                <div class="name">user-group</div>
                <div class="code-name">#cdp-icon-user-group</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-account-plus"></use>
                </svg>
                <div class="name">account-plus</div>
                <div class="code-name">#cdp-icon-account-plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-account"></use>
                </svg>
                <div class="name">account</div>
                <div class="code-name">#cdp-icon-account</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-cog"></use>
                </svg>
                <div class="name">cog</div>
                <div class="code-name">#cdp-icon-cog</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-clock"></use>
                </svg>
                <div class="name">clock</div>
                <div class="code-name">#cdp-icon-clock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-calendar-alt"></use>
                </svg>
                <div class="name">calendar-alt</div>
                <div class="code-name">#cdp-icon-calendar-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-clouddownload"></use>
                </svg>
                <div class="name">cloud download</div>
                <div class="code-name">#cdp-icon-clouddownload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-cloudupload"></use>
                </svg>
                <div class="name">cloud upload</div>
                <div class="code-name">#cdp-icon-cloudupload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-exchange"></use>
                </svg>
                <div class="name">exchange</div>
                <div class="code-name">#cdp-icon-exchange</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-info-circle"></use>
                </svg>
                <div class="name">info-circle</div>
                <div class="code-name">#cdp-icon-info-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-question-circle"></use>
                </svg>
                <div class="name">question-circle</div>
                <div class="code-name">#cdp-icon-question-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-exclamation-circle"></use>
                </svg>
                <div class="name">exclamation-circle</div>
                <div class="code-name">#cdp-icon-exclamation-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-minus-circle"></use>
                </svg>
                <div class="name">minus-circle</div>
                <div class="code-name">#cdp-icon-minus-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-plus-circle"></use>
                </svg>
                <div class="name">plus-circle</div>
                <div class="code-name">#cdp-icon-plus-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-times-circle"></use>
                </svg>
                <div class="name">times-circle</div>
                <div class="code-name">#cdp-icon-times-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-check-circle"></use>
                </svg>
                <div class="name">check-circle</div>
                <div class="code-name">#cdp-icon-check-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-compress-alt"></use>
                </svg>
                <div class="name">compress-alt</div>
                <div class="code-name">#cdp-icon-compress-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-expand-alt"></use>
                </svg>
                <div class="name">expand-alt</div>
                <div class="code-name">#cdp-icon-expand-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-ban"></use>
                </svg>
                <div class="name">ban</div>
                <div class="code-name">#cdp-icon-ban</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-minus"></use>
                </svg>
                <div class="name">minus</div>
                <div class="code-name">#cdp-icon-minus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-plus"></use>
                </svg>
                <div class="name">plus</div>
                <div class="code-name">#cdp-icon-plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-times"></use>
                </svg>
                <div class="name">times</div>
                <div class="code-name">#cdp-icon-times</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-check"></use>
                </svg>
                <div class="name">check</div>
                <div class="code-name">#cdp-icon-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-search-minus"></use>
                </svg>
                <div class="name">search-minus</div>
                <div class="code-name">#cdp-icon-search-minus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-search-plus"></use>
                </svg>
                <div class="name">search-plus</div>
                <div class="code-name">#cdp-icon-search-plus</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#cdp-icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-reply"></use>
                </svg>
                <div class="name">reply</div>
                <div class="code-name">#cdp-icon-reply</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-undo"></use>
                </svg>
                <div class="name">undo</div>
                <div class="code-name">#cdp-icon-undo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-redo"></use>
                </svg>
                <div class="name">redo</div>
                <div class="code-name">#cdp-icon-redo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-external-link"></use>
                </svg>
                <div class="name">external-link</div>
                <div class="code-name">#cdp-icon-external-link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-arrows-alt"></use>
                </svg>
                <div class="name">arrows-alt</div>
                <div class="code-name">#cdp-icon-arrows-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-indent"></use>
                </svg>
                <div class="name">indent</div>
                <div class="code-name">#cdp-icon-indent</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-outdent"></use>
                </svg>
                <div class="name">outdent</div>
                <div class="code-name">#cdp-icon-outdent</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-sort-line"></use>
                </svg>
                <div class="name">sort-line</div>
                <div class="code-name">#cdp-icon-sort-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-switch"></use>
                </svg>
                <div class="name">switch</div>
                <div class="code-name">#cdp-icon-switch</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-wind-descending"></use>
                </svg>
                <div class="name">wind-descending</div>
                <div class="code-name">#cdp-icon-wind-descending</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-wind-ascending"></use>
                </svg>
                <div class="name">wind-ascending</div>
                <div class="code-name">#cdp-icon-wind-ascending</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-download"></use>
                </svg>
                <div class="name">download</div>
                <div class="code-name">#cdp-icon-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-upload"></use>
                </svg>
                <div class="name">upload</div>
                <div class="code-name">#cdp-icon-upload</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-arrow-to-bottom"></use>
                </svg>
                <div class="name">arrow-to-bottom</div>
                <div class="code-name">#cdp-icon-arrow-to-bottom</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-arrow-to-top"></use>
                </svg>
                <div class="name">arrow-to-top</div>
                <div class="code-name">#cdp-icon-arrow-to-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-long-arrow-down"></use>
                </svg>
                <div class="name">long-arrow-down</div>
                <div class="code-name">#cdp-icon-long-arrow-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-long-arrow-up"></use>
                </svg>
                <div class="name">long-arrow-up</div>
                <div class="code-name">#cdp-icon-long-arrow-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-arrow-right"></use>
                </svg>
                <div class="name">arrow-right</div>
                <div class="code-name">#cdp-icon-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-arrow-left"></use>
                </svg>
                <div class="name">arrow-left</div>
                <div class="code-name">#cdp-icon-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-sort"></use>
                </svg>
                <div class="name">sort</div>
                <div class="code-name">#cdp-icon-sort</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-sort-down"></use>
                </svg>
                <div class="name">sort-down</div>
                <div class="code-name">#cdp-icon-sort-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-sort-up"></use>
                </svg>
                <div class="name">sort-up</div>
                <div class="code-name">#cdp-icon-sort-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-caret-right"></use>
                </svg>
                <div class="name">caret-right</div>
                <div class="code-name">#cdp-icon-caret-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-caret-left"></use>
                </svg>
                <div class="name">caret-left</div>
                <div class="code-name">#cdp-icon-caret-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-arrows-v"></use>
                </svg>
                <div class="name">arrows-v</div>
                <div class="code-name">#cdp-icon-arrows-v</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-angle-double-down"></use>
                </svg>
                <div class="name">angle- double-down</div>
                <div class="code-name">#cdp-icon-angle-double-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-angle-double-up"></use>
                </svg>
                <div class="name">angle-double-up</div>
                <div class="code-name">#cdp-icon-angle-double-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-angle-double-right"></use>
                </svg>
                <div class="name">angle-double-right</div>
                <div class="code-name">#cdp-icon-angle-double-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-angle-double-left"></use>
                </svg>
                <div class="name">angle-double-left</div>
                <div class="code-name">#cdp-icon-angle-double-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-angle-down"></use>
                </svg>
                <div class="name">angle-down</div>
                <div class="code-name">#cdp-icon-angle-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-angle-up"></use>
                </svg>
                <div class="name">angle-up</div>
                <div class="code-name">#cdp-icon-angle-up</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-angle-right"></use>
                </svg>
                <div class="name">angle-right</div>
                <div class="code-name">#cdp-icon-angle-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-angle-left"></use>
                </svg>
                <div class="name">angle-left</div>
                <div class="code-name">#cdp-icon-angle-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-paperclip"></use>
                </svg>
                <div class="name">paperclip</div>
                <div class="code-name">#cdp-icon-paperclip</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-connection"></use>
                </svg>
                <div class="name">connection</div>
                <div class="code-name">#cdp-icon-connection</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-training"></use>
                </svg>
                <div class="name">training</div>
                <div class="code-name">#cdp-icon-training</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-process"></use>
                </svg>
                <div class="name">process</div>
                <div class="code-name">#cdp-icon-process</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-news"></use>
                </svg>
                <div class="name">news</div>
                <div class="code-name">#cdp-icon-news</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-save"></use>
                </svg>
                <div class="name">save</div>
                <div class="code-name">#cdp-icon-save</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-print"></use>
                </svg>
                <div class="name">print</div>
                <div class="code-name">#cdp-icon-print</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-new-releases"></use>
                </svg>
                <div class="name">new-releases</div>
                <div class="code-name">#cdp-icon-new-releases</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-release"></use>
                </svg>
                <div class="name">release</div>
                <div class="code-name">#cdp-icon-release</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-alert"></use>
                </svg>
                <div class="name">alert</div>
                <div class="code-name">#cdp-icon-alert</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-backspace"></use>
                </svg>
                <div class="name">backspace</div>
                <div class="code-name">#cdp-icon-backspace</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-gem"></use>
                </svg>
                <div class="name">gem</div>
                <div class="code-name">#cdp-icon-gem</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-integral"></use>
                </svg>
                <div class="name">integral</div>
                <div class="code-name">#cdp-icon-integral</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-star-circle"></use>
                </svg>
                <div class="name">star-circle</div>
                <div class="code-name">#cdp-icon-star-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-user-circle"></use>
                </svg>
                <div class="name">user-circle</div>
                <div class="code-name">#cdp-icon-user-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-cloud-machine-fill"></use>
                </svg>
                <div class="name">cloud-machine-fill</div>
                <div class="code-name">#cdp-icon-cloud-machine-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-cloud-machine"></use>
                </svg>
                <div class="name">cloud-machine</div>
                <div class="code-name">#cdp-icon-cloud-machine</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-terminal-fill"></use>
                </svg>
                <div class="name">terminal-fill</div>
                <div class="code-name">#cdp-icon-terminal-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-terminal"></use>
                </svg>
                <div class="name">terminal</div>
                <div class="code-name">#cdp-icon-terminal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-shopping-cart-fill"></use>
                </svg>
                <div class="name">shopping-cart-fill</div>
                <div class="code-name">#cdp-icon-shopping-cart-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-resource"></use>
                </svg>
                <div class="name">resource</div>
                <div class="code-name">#cdp-icon-resource</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-rank"></use>
                </svg>
                <div class="name">rank</div>
                <div class="code-name">#cdp-icon-rank</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-sync-alt"></use>
                </svg>
                <div class="name">sync-alt</div>
                <div class="code-name">#cdp-icon-sync-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-compass"></use>
                </svg>
                <div class="name">compass</div>
                <div class="code-name">#cdp-icon-compass</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-arrow-alt-from-top"></use>
                </svg>
                <div class="name">arrow-alt- from-top</div>
                <div class="code-name">#cdp-icon-arrow-alt-from-top</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-arrow-alt-from-botto"></use>
                </svg>
                <div class="name">arrow-alt-from-botto</div>
                <div class="code-name">#cdp-icon-arrow-alt-from-botto</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-menu"></use>
                </svg>
                <div class="name">menu</div>
                <div class="code-name">#cdp-icon-menu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-icon-drag"></use>
                </svg>
                <div class="name">icon-drag</div>
                <div class="code-name">#cdp-icon-icon-drag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-early-warning"></use>
                </svg>
                <div class="name">early-warning</div>
                <div class="code-name">#cdp-icon-early-warning</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-share"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#cdp-icon-share</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-share1"></use>
                </svg>
                <div class="name">share</div>
                <div class="code-name">#cdp-icon-share1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-management-"></use>
                </svg>
                <div class="name">management</div>
                <div class="code-name">#cdp-icon-management-</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-accesskeys"></use>
                </svg>
                <div class="name">accesskeys</div>
                <div class="code-name">#cdp-icon-accesskeys</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-arrow-sortdown-smal"></use>
                </svg>
                <div class="name">arrow-sort down-small</div>
                <div class="code-name">#cdp-icon-arrow-sortdown-smal</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-minus-square-fill"></use>
                </svg>
                <div class="name">minus-square-fill</div>
                <div class="code-name">#cdp-icon-minus-square-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-plus-square-fill"></use>
                </svg>
                <div class="name">plus-square-fill</div>
                <div class="code-name">#cdp-icon-plus-square-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-minus-square"></use>
                </svg>
                <div class="name">minus-square</div>
                <div class="code-name">#cdp-icon-minus-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-plus-square"></use>
                </svg>
                <div class="name">plus-square</div>
                <div class="code-name">#cdp-icon-plus-square</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-stepmode"></use>
                </svg>
                <div class="name">step mode</div>
                <div class="code-name">#cdp-icon-stepmode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-scrollingmode"></use>
                </svg>
                <div class="name">scrolling mode</div>
                <div class="code-name">#cdp-icon-scrollingmode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-shoppingcart"></use>
                </svg>
                <div class="name">shopping cart</div>
                <div class="code-name">#cdp-icon-shoppingcart</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-waiting-fill"></use>
                </svg>
                <div class="name">waiting-fill</div>
                <div class="code-name">#cdp-icon-waiting-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-waiting"></use>
                </svg>
                <div class="name">waiting</div>
                <div class="code-name">#cdp-icon-waiting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-right-arrow-rect"></use>
                </svg>
                <div class="name">right-arrow-rect</div>
                <div class="code-name">#cdp-icon-right-arrow-rect</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-left-arrow-rect"></use>
                </svg>
                <div class="name">left-arrow-rect</div>
                <div class="code-name">#cdp-icon-left-arrow-rect</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-bell"></use>
                </svg>
                <div class="name">bell</div>
                <div class="code-name">#cdp-icon-bell</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-structured-data"></use>
                </svg>
                <div class="name">structured data</div>
                <div class="code-name">#cdp-icon-structured-data</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-drag"></use>
                </svg>
                <div class="name">drag</div>
                <div class="code-name">#cdp-icon-drag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-vector"></use>
                </svg>
                <div class="name">vector</div>
                <div class="code-name">#cdp-icon-vector</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-ellipsis-vertical"></use>
                </svg>
                <div class="name">ellipsis-v</div>
                <div class="code-name">#cdp-icon-ellipsis-vertical</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-NEW-copy"></use>
                </svg>
                <div class="name">NEW</div>
                <div class="code-name">#cdp-icon-NEW-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-gallery-view"></use>
                </svg>
                <div class="name">gallery-view</div>
                <div class="code-name">#cdp-icon-gallery-view</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-HOT-copy"></use>
                </svg>
                <div class="name">HOT</div>
                <div class="code-name">#cdp-icon-HOT-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-WIFI"></use>
                </svg>
                <div class="name">WIFI</div>
                <div class="code-name">#cdp-icon-WIFI</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-home"></use>
                </svg>
                <div class="name">home</div>
                <div class="code-name">#cdp-icon-home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-bug-report"></use>
                </svg>
                <div class="name">bug-report</div>
                <div class="code-name">#cdp-icon-bug-report</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-monitoring"></use>
                </svg>
                <div class="name">monitoring</div>
                <div class="code-name">#cdp-icon-monitoring</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-qrcode"></use>
                </svg>
                <div class="name">qrcode</div>
                <div class="code-name">#cdp-icon-qrcode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-diagnose"></use>
                </svg>
                <div class="name">diagnose</div>
                <div class="code-name">#cdp-icon-diagnose</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-scan"></use>
                </svg>
                <div class="name">scan</div>
                <div class="code-name">#cdp-icon-scan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-loading"></use>
                </svg>
                <div class="name">loading</div>
                <div class="code-name">#cdp-icon-loading</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-cut"></use>
                </svg>
                <div class="name">cut</div>
                <div class="code-name">#cdp-icon-cut</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-Directory-tree"></use>
                </svg>
                <div class="name">Directory tree</div>
                <div class="code-name">#cdp-icon-Directory-tree</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-gift"></use>
                </svg>
                <div class="name">gift</div>
                <div class="code-name">#cdp-icon-gift</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-application"></use>
                </svg>
                <div class="name">application</div>
                <div class="code-name">#cdp-icon-application</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-link"></use>
                </svg>
                <div class="name">link</div>
                <div class="code-name">#cdp-icon-link</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-applicationgroup"></use>
                </svg>
                <div class="name">application  group</div>
                <div class="code-name">#cdp-icon-applicationgroup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-poweroff"></use>
                </svg>
                <div class="name">poweroff</div>
                <div class="code-name">#cdp-icon-poweroff</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-key"></use>
                </svg>
                <div class="name">key</div>
                <div class="code-name">#cdp-icon-key</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-safety-certificate"></use>
                </svg>
                <div class="name">safety-certificate</div>
                <div class="code-name">#cdp-icon-safety-certificate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-supervise"></use>
                </svg>
                <div class="name">supervise</div>
                <div class="code-name">#cdp-icon-supervise</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-tag-subscipt"></use>
                </svg>
                <div class="name">tag-subscipt</div>
                <div class="code-name">#cdp-icon-tag-subscipt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-chart-pie-alt"></use>
                </svg>
                <div class="name">chart-pie-alt</div>
                <div class="code-name">#cdp-icon-chart-pie-alt</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-chart-relation"></use>
                </svg>
                <div class="name">chart-relation</div>
                <div class="code-name">#cdp-icon-chart-relation</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-chart-scatter-plot"></use>
                </svg>
                <div class="name">chart-scatter-plot</div>
                <div class="code-name">#cdp-icon-chart-scatter-plot</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-chart-area"></use>
                </svg>
                <div class="name">chart-area</div>
                <div class="code-name">#cdp-icon-chart-area</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-chart-line"></use>
                </svg>
                <div class="name">chart-line</div>
                <div class="code-name">#cdp-icon-chart-line</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-chart-bar"></use>
                </svg>
                <div class="name">chart-bar</div>
                <div class="code-name">#cdp-icon-chart-bar</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-display-code"></use>
                </svg>
                <div class="name">display-code</div>
                <div class="code-name">#cdp-icon-display-code</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-display-arrow-right"></use>
                </svg>
                <div class="name">display-arrow-right</div>
                <div class="code-name">#cdp-icon-display-arrow-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-display-arrow-left"></use>
                </svg>
                <div class="name">display-arrow-left</div>
                <div class="code-name">#cdp-icon-display-arrow-left</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-laptop-error"></use>
                </svg>
                <div class="name">laptop-error</div>
                <div class="code-name">#cdp-icon-laptop-error</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-laptop-check"></use>
                </svg>
                <div class="name">laptop-check</div>
                <div class="code-name">#cdp-icon-laptop-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-laptop"></use>
                </svg>
                <div class="name">laptop</div>
                <div class="code-name">#cdp-icon-laptop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#cdp-icon-mobile-error"></use>
                </svg>
                <div class="name">mobile-error</div>
                <div class="code-name">#cdp-icon-mobile-error</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
